<template>
	<view class="processDetial">
		<!-- 内容2 审批流程 -->
		<view class="spBox">
			<view class="titles">
				审批流程
			</view>
			<view class="spList">
				<view class="items" v-for="(item,index) in approvalInfo.activityNodes" :key="item.id">
					<view class="iconBox">
						<u-icon name="account" color="#fff" size="22"></u-icon>
						<!-- 状态 -->
						<view :class="item.status == 2 ? 'ztBox' : (item.status == 1 ? 'jzz' : (item.status == -1 ? 'wks' : 'jj'))">
							<view class="">
								<u-icon name="checkmark" color="#fff" size="12" v-if="item.status == 2"></u-icon>
								<u-icon name="edit-pen" color="#fff" size="12" v-else-if="item.status == 1"></u-icon>
								<u-icon name="clock" color="#fff" size="12" v-else-if="item.status == -1"></u-icon>
								<u-icon name="close" color="#fff" size="12" v-else-if="item.status == 3"></u-icon>
							</view>
						</view>
					</view>
					<view class="conBox">
						<view class="title">{{item.name}}</view>
						<block v-if="item.status == 2 || item.status == 1">
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser.nickname}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
						</block>
						<block v-else>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser.nickname}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.candidateUsers" :key="tasksIndex">
								<view class="names">{{tasksItem.nickname}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容3 审批操作 -->
		<view class="spOperate"  v-show="this.approvalInfo.status == 1 && this.approvalInfo.todoTask && this.approvalInfo.todoTask.status == 1">
			<uni-forms ref="formData" :modelValue="formData" :label-width="100" v-if="approvalInfo.todoTask && approvalInfo.todoTask.formId && spFormData.type == 1">
				<view class="ldpsBox">
					<view class="">{{formDataName}}</view>
					<block v-for="(item,index) in formArr" :key="item.field">
						<block v-if="item.type == 'ApiSelect'">
							<uni-forms-item :label="item.title" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.title}]">
								<uni-data-select
								    v-model="formData[item.field]"
								    :localdata="item.option"
									:placeholder="'请选择'+item.title"
								></uni-data-select>
							</uni-forms-item>
						</block>
						<block v-if="item.type == 'datePicker'">
							<uni-forms-item :label="item.title" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.title}]">
								<uni-datetime-picker type="datetime" v-model="formData[item.field]" return-type="string" :placeholder="'请选择'+item.title" />
							</uni-forms-item>
						</block>
						<block v-if="item.type == 'input'">
							<uni-forms-item :label="item.title" :name="item.field" :rules="[{'required': true,errorMessage: '请输入'+item.title}]">
								<uni-easyinput v-model="formData[item.field]" :placeholder="'请输入'+item.title"></uni-easyinput>
							</uni-forms-item>
						</block>
					</block>
				</view>
			</uni-forms>
			<uni-forms ref="form" :modelValue="spFormData" :label-width="100" :rules="rules">
				<!-- <uni-forms-item label="审批类型" name="type">
					<uni-data-select
					    v-model="spFormData.type"
					    :localdata="typeList"
						placeholder="请选择审批类型"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="审批理由" name="reason">
					<uni-easyinput v-model="spFormData.reason" placeholder="请输入审批理由"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item label="审批类型" name="type">
					<uni-data-select
					    v-model="spFormData.type"
					    :localdata="typeList"
						placeholder="请选择审批类型"
						@change="changeType"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item :label="spFormData.type == 7 ? '退回理由' : '审批理由'" name="reason">
					<uni-easyinput v-model="spFormData.reason" placeholder="请输入审批理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="抄送人" name="copyUserIds" v-if="spFormData.type == 3">
					<userSystemMultiple v-model="spFormData.copyUserIds" />
				</uni-forms-item>
				<uni-forms-item label="转办人" name="assigneeUserId" v-if="spFormData.type == 4">
					<userSystemMultiple v-model="spFormData.assigneeUserId" :isMultiple="false" />
				</uni-forms-item>
				<uni-forms-item label="接收人" name="delegateUserId" v-if="spFormData.type == 5">
					<userSystemMultiple v-model="spFormData.delegateUserId" :isMultiple="false" />
				</uni-forms-item>
				<block v-if="spFormData.type == 6">
					<uni-forms-item label="加签处理人" name="addSignUserIds">
						<userSystemMultiple v-model="spFormData.addSignUserIds" />
					</uni-forms-item>
					<uni-forms-item label="加签类型" name="signType">
						<uni-data-select
						    v-model="spFormData.signType"
						    :localdata="signTypeList"
							placeholder="请选择加签类型"
						></uni-data-select>
					</uni-forms-item>
				</block>
				<block v-if="spFormData.type == 7">
					<uni-forms-item label="退回节点" name="targetTaskDefinitionKey">
						<uni-data-select
						    v-model="spFormData.targetTaskDefinitionKey"
						    :localdata="returnList"
							placeholder="请选择退回节点"
						></uni-data-select>
					</uni-forms-item>
				</block>
			</uni-forms>
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import {getApprovalDetail,approveTask,rejectTask,getTaskListByProcessInstanceId} from '@/api/oa/common.js'
	import {copyTask,transferTask,delegateTask,signCreateTask,returnTask,getTaskListByReturn} from '@/api/oa/common.js'
	import request from '@/utils/request'
	import userSystemMultiple from '@/components/user/userSystemMultiple'
	export default {
		components:{
			userSystemMultiple
		},
		props:{
			processId:"",
			approvalInfo:{}
		},
		watch:{
			approvalInfo(val){
				if(val.todoTask && val.todoTask.formFields){
					this.formFieldsChange();
				}
			}
		},
		data() {
			return {
				processArr:[],
				// 审批表单
				spFormData:{
					type:'',
					reason:'',
				},
				rules:{
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择审批类型'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入审批理由'
						}]
					},
					copyUserIds: {
						rules: [{
							required: true,
							errorMessage: '请选择抄送人'
						}]
					},
					assigneeUserId: {
						rules: [{
							required: true,
							errorMessage: '请选择转办人'
						}]
					},
					delegateUserId: {
						rules: [{
							required: true,
							errorMessage: '请选择接收人'
						}]
					},
					addSignUserIds: {
						rules: [{
							required: true,
							errorMessage: '请选择加签处理人'
						}]
					},
					signType: {
						rules: [{
							required: true,
							errorMessage: '请选择加签类型'
						}]
					},
					targetTaskDefinitionKey: {
						rules: [{
							required: true,
							errorMessage: '请选择退回节点'
						}]
					},
				},
				fieldRules:{},
				// 当前登录用户信息
				userInfo:{},
				typeList:[
					{ value: 1, text: "通过" },
					{ value: 2, text: "拒绝" },
					{ value: 3, text: "抄送" },
					{ value: 4, text: "转办" },
					{ value: 5, text: "委派" },
					{ value: 6, text: "加签" },
					{ value: 7, text: "回退" },
				],
				// 加签类型
				signTypeList:[
					{ value: "after", text: "向后加签" },
					{ value: "before", text: "向前加签" },
				],
				// 退回节点列表
				returnList:[],
				// 动态表单
				formData:{},
				// 动态表格名称
				formDataName:'',
				formArr:[],
			};
		},
		methods:{
			formFieldsChange(){
				let arr = this.approvalInfo.todoTask.formFields.map(item=>{
					return JSON.parse(item)
				});
				console.log(arr)
				let formArr = [];
				arr.forEach(item=>{
					if(item.type == 'fcTable'){
						// 表格
						// 判断每项props
						item.children.forEach(items=>{
							if(items.props){
								formArr.push(items)
							}else{
								if(items.type == "input"){
									formArr.push(items)
								}
							}
						})
					}else if(item.type == 'div'){
						// 标题
						this.formDataName = item.children[0]
					}
				});
				formArr.forEach(async (item,index)=>{
					this.$set(this.formData,item.field,'')
					// 判断是否调用接口
					if(item.type == "ApiSelect"){
						// 调用接口
						let data = await request({
							url: item.props.url,
							'method':item.method
						});
						let option =  data.data.map(item=>{
							return {
								text:item.licensePlate ? item.licensePlate : item.name,
								value:item.id
							}
						})
						this.$set(this.formArr[index],'option',option)
					}
				})
				this.formArr = formArr;
			},
			// 获取当前审批步骤
			async getBz(){
				let info = await getTaskListByProcessInstanceId(this.processId);
				this.processArr = info.data;
			},
			// 点击提交审批
			async submit(){
				let obj = {
					id:this.approvalInfo.todoTask.id,
					reason:this.spFormData.reason
				};
				this.$refs.form.validate().then(async res => {
					obj.variables = this.formData
					// 判断选择的类型
					if(this.spFormData.type == 1){
						// 通过
						if(this.approvalInfo.todoTask.formId){
							this.$refs.formData.validate().then(async res => {
								let info = await approveTask(obj);
								console.log(info)
								uni.hideLoading();
								uni.showToast({
									title:'提交成功'
								});
								this.getBz();
								// 调用父组件
								this.$emit('init')
								this.spFormData={
									type:'',
									reason:'',
								}
							}).catch(err=>{
								console.log(err)
							})
						}else{
							let info = await approveTask(obj);
							console.log(info)
							uni.hideLoading();
							uni.showToast({
								title:'提交成功'
							});
							this.getBz();
							// 调用父组件
							this.$emit('init')
							this.spFormData={
								type:'',
								reason:'',
							}
						}
						
					}else if(this.spFormData.type == 2){
						// 拒绝
						let info = await rejectTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						// this.initFun()
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 3){
						uni.hideLoading()
						// 抄送
						console.log(this.spFormData)
						let copyUserIds = this.spFormData.copyUserIds.map(item=>{
							return item.id
						})
						obj.copyUserIds = copyUserIds;
						let info = await copyTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						// this.initFun()
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 4){
						// 转办
						uni.hideLoading()
						console.log(this.spFormData)
						obj.assigneeUserId = this.spFormData.assigneeUserId.id;
						let info = await transferTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 5){
						// 委派
						uni.hideLoading()
						console.log(this.spFormData)
						obj.delegateUserId = this.spFormData.delegateUserId.id;
						let info = await delegateTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 6){
						// 加签
						uni.hideLoading()
						let userIds = this.spFormData.addSignUserIds.map(item=>{
							return item.id
						});
						obj.userIds = userIds;
						obj.type = this.spFormData.signType;
						console.log(obj)
						let info = await signCreateTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 7){
						// 回退
						uni.hideLoading()
						obj.targetTaskDefinitionKey = this.spFormData.targetTaskDefinitionKey;
						let info = await returnTask(obj)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}
				}).catch(err=>{
				
				})
			},
			// 审批类型
			async changeType(type){
				console.log(type);
				if(type == 7){
					// 回退
					let info = await getTaskListByReturn({
						id:this.approvalInfo.todoTask.id
					});
					this.returnList = info.data.map(item=>{
						return {
							text:item.name,
							value:item.taskDefinitionKey
						}
					})
				}
			},
		},
		mounted() {
			this.userInfo = this.$store.state.user.oaUser;
			this.getBz()
		}
	}
</script>

<style lang="less" scoped>
.spBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		.titles{
			font-size: 30rpx;
			padding: 0 30rpx;
			color: #333;
			margin: 20rpx 0;
		}
		.spList{
			width: 100%;
			height: auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			.items{
				display: flex;
				align-items: flex-start;
				margin-top: 20rpx;
				position: relative;
				z-index: 1;
				.iconBox{
					width: 60rpx;
					height: 60rpx;
					background-color: rgb(63 115 247);
					border-radius: 50%;
					color: #fff;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					flex: none;
					.ztBox,.jzz,.wks,.jj{
						position: absolute;
						width: 38rpx;
						height: 38rpx;
						background-color: #fff;
						display: flex;
						margin: 0 auto;
						border-radius: 50%;
						right: -10rpx;
						bottom: -10rpx;
						view{
							width: 34rpx;
							height: 34rpx;
							background-color: #00b32a;
							border-radius: 50%;
							margin: 0 auto;
							overflow: hidden;
							margin-top: 3rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.jzz{
						view{
							background-color: #337ecc;
						}
					}
					.wks{
						view{
							background-color: #ccc;
						}
					}
					.jj{
						view{
							background-color: red;
						}
					}
				}
				.conBox{
					flex: 1;
					min-height: 160rpx;
					background-color: rgba(234, 229, 234, 0.8);
					border-radius: 6rpx;
					padding: 20rpx;
					box-sizing: border-box;
					margin-left: 50rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.itemCon{
						.names,.infos{
							font-size: 24rpx;
						}
						.names{
							margin: 10rpx 0;
						}
						.infos{
							color: #8b8b8b;
						}
					}
					
				}
				&::after{
					content: '';
					display: block;
					border-left:2px solid #e4e7ed;
					height: 100%;
					position: absolute;
					left: 30rpx;
					top: 20rpx;
					z-index: -1;
				}
				&:first-child{
					margin-top: 0;
				}
				&:last-child{
					&::after{
						display: none;
					}
				}
			}
		}
	}
	.spOperate{
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 50rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>
